我們在Object [下]中有提到 getter / setter
,由於這個部分在書中的解釋是比較舊的版本,所以找過新版的資料後整理在此篇章中。
getter是一種獲取特定屬性的方法,setter是設置特定屬性的方法,getter和setter常被用在:
有時候物件屬性會需要回傳動態的數據
,或要在不使用明確的方法呼叫(不直接訪問物件屬性)下反映出內部變數
的狀態,這樣可以使用getter來達到這個目的,
const obj = {
log: ['a', 'b', 'c'],
count: 0,
get latest() {
if (this.log.length === 0) {
return undefined;
}
obj.count ++; // 將count綁定給get
return this.log[this.log.length - obj.count]; // 將log綁定給get
}
};
for(let i = 0; i< 4; i++){
console.log(obj.latest); // 呼叫get method以訪問這些被綁定給getter的屬性
}
/*
c
b
a
undefined
*/
getter可以使用Delete
操作符移除。
const obj = {
log: ['a', 'b', 'c'],
count: 0,
get latest() {
if (this.log.length === 0) {
return undefined;
}
obj.count ++; // 將count綁定給get
return this.log[this.log.length - obj.count]; // 將log綁定給get
}
};
console.log(obj.latest); // c
delete obj.latest;
console.log(obj.latest); // undefined
我們除了在一開始建立物件的時候定義getter之外,可以使用defineProperty
添加getter給現有物件中
。
const obj = {
a: 0
}
Object.defineProperty(obj, 'b', {
get: function(){
return this.a + 1;
}
})
console.log(obj.b); // 1
setter能在嘗試修改指定屬性時執行給定的函式
,Setter最常與Getter一同建立虛擬屬性(pseudo-property)。
const language = {
set current(name) {
this.log.push(name);
},
log: []
};
language.current = 'EN';
language.current = 'FA';
console.log(language.log); // ['EN', 'FA']
setter可以使用Delete
操作符移除。
const language = {
set current(name) {
this.log.push(name);
},
log: []
};
language.current = 'EN';
console.log(language.log); // 'EN'
delete language.current;
console.log(language.current); // undefined
setter一樣也可以通過defineProperty
添加setter給現有物件中
。
const obj = {
a: 0
};
Object.defineProperty(obj, 'b', { set: function(x) { this.a = x / 2; } });
o.b = 10;
console.log(o.a) // 5
可以使用 getter / setter 對物件中的屬性進行一些操作,特別是如果想在返回屬性或設置它們之前對值做一些特殊的事情,兩個方法都可以使用defineProperty
方法添加 getter/setter 到現有的物件中,也可以使用delete
將他們移除。
參考文獻:
Getter 和 Setter 的定義
getter
setter